
<template>
    <div class="cpcBot">
        <div class="boxS">
            <div class="biaoBg">
                <p class="biaoP">党员年龄分布</p>
            </div>
            <div class="boxARR">
                <div class="cpcBchatBox1">
                    <div id="cpcBchat1" style="width: 100%; height: 100%"></div>
                </div>
                <div class="cpcBchatBox2">
                    <div id="cpcBchat2" style="width: 100%; height: 100%"></div>
                </div>
            </div>
        </div>
        <div class="boxI">
            <div class="biaoBg">
                <p class="biaoP">党建品牌</p>
            </div>
            <div class="boxIimg">
                <img src="@/assets/cpc/name.png" alt="" />
            </div>
        </div>
        <div class="boxI">
            <div class="biaoBg">
                <p class="biaoP">四个项目</p>
            </div>
            <div class="cpcBchatBox3">
                <div id="cpcBchat3" style="width: 100%; height: 100%"></div>
            </div>
        </div>
        <div class="boxI">
            <div class="biaoBg">
                <p class="biaoP">服务中小微企业</p>
            </div>
            <div class="cpcBchatBox4">
                <div id="cpcBchat4" style="width: 100%; height: 100%"></div>
            </div>
        </div>
    </div>
</template>

<script>
import { getPie3D, bindListen } from '@/utils/pie.js'
import { screenBottomData } from '@/api/cpc.js'
export default {
    data() {
        return {
            option1: null,
            myChart1: null,
            optionData1: [
                {
                    name: '20-30',
                    value: 20
                },
                {
                    name: '30-40',
                    value: 20
                },
                {
                    name: '40-50',
                    value: 40
                }
            ],
            option2: null,
            myChart2: null,
            optionData2: [
                {
                    name: '本科',
                    value: 20
                },
                {
                    name: '研究生',
                    value: 20
                },
                {
                    name: '博士',
                    value: 40
                }
            ]
        }
    },
    mounted() {
        this.myChart1 = this.$echarts.init(document.getElementById('cpcBchat1'))
        this.myChart2 = this.$echarts.init(document.getElementById('cpcBchat2'))
        this.init()
    },
    methods: {
        cpcBottomAll() {},

        //初始化构建
        init() {
            screenBottomData().then((res) => {
                // 传入数据生成 option ; getPie3D(数据，色值，透明的空心占比（调节中间空心范围的0就是普通饼1就很镂空，旋转角度，整体放大缩小）)
                let color1 = ['#F24477', '#5991FD', '#FCE1C4']
                this.optionData1 = res.data.AgeDistribution.map((item) => {
                    return {
                        name: item.name,
                        value: Number(item.value)
                    }
                })

                this.option1 = getPie3D(this.optionData1, color1, 0.75, 55, 225)
                //将配置项设置进去
                this.myChart1.setOption(this.option1)
                //鼠标移动上去特效效果
                bindListen(this.myChart1, this.option1)
                let color2 = ['#FFC73B', '#E33322', '#4CEAFF']
                this.optionData2 = res.data.EducationDistribution.map(
                    (item) => {
                        return {
                            name: item.name,
                            value: Number(item.value)
                        }
                    }
                )
                this.option2 = getPie3D(this.optionData2, color2, 0.75, 55, 225)
                // this.option2 = getPie3D(this.optionData2, color2, 0.75, 35, 205)
                //将配置项设置进去
                this.myChart2.setOption(this.option2)
                //鼠标移动上去特效效果
                bindListen(this.myChart2, this.option2)
                // 阶梯
                let color3 = ['#00A0E9', '#009944', '#ffd334', '#F8B551']
                let bchar3 = res.data.Project.map((item, index) => {
                    return {
                        value: Number(item.value),
                        name: item.name,
                        itemStyle: { color: color3[index] }
                    }
                })
                this.drawcpcBchat3(bchar3)
                // 锥形
                let Bchar4x = res.data.ServingCompany.map((item) => {
                    return item.gsmc
                })
                let Bchar4y = res.data.ServingCompany.map((item) => {
                    return item.count
                })
                this.drawcpcBchat4(Bchar4x, Bchar4y)
            })
        },
        drawcpcBchat3(data) {
            this.cpcBchat3 = this.$echarts.init(
                document.getElementById('cpcBchat3')
            )
            let option = {
                //鼠标滑过，弹出框
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} '
                },
                series: [
                    {
                        name: '数量',
                        type: 'funnel',
                        left: '10%',
                        top: 20,
                        bottom: 20,
                        width: '80%',
                        minSize: '20%', //顶部是平底还是尖底
                        maxSize: '100%',
                        sort: 'ascending', //改变当前可变为漏斗形 descending
                        gap: 2,
                        label: {
                            show: true,
                            position: 'inside',
                            formatter: function (params) {
                                return params.name + '  ' + params.value
                            }
                        },
                        labelLine: {
                            length: 10,
                            lineStyle: {
                                width: 1,
                                type: 'solid'
                            }
                        },
                        //间距
                        itemStyle: {
                            borderColor: 'transparent'
                        },
                        //hover 显示的字体
                        emphasis: {
                            label: {
                                fontSize: 17
                            }
                        },
                        data: data
                    }
                ]
            }

            this.cpcBchat3.setOption(option)
        },
        drawcpcBchat4(xAxis, data) {
            this.cpcBchat4 = this.$echarts.init(
                document.getElementById('cpcBchat4')
            )
            let option = {
                grid: {
                    top: '15%',
                    right: '3%',
                    left: '10%',
                    bottom: '12%'
                },
                xAxis: {
                    type: 'category',
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        color: '#FFE0B2',
                        textStyle: {
                            fontSize: 11
                        },
                        interval: 0
                    },
                    data: xAxis
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        color: '#FFE0B2',
                        textStyle: {
                            fontSize: 11
                        }
                    },
                    splitLine: {
                        show: false
                    }
                },
                series: [
                    {
                        data: data,
                        type: 'pictorialBar', // 象形柱图
                        symbol: 'triangle', // 三角形
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: '#FFFFFF'
                                },
                                {
                                    offset: 1,
                                    color: '#FFC571'
                                }
                            ]
                        },
                        label: {
                            normal: {
                                show: true,
                                lineHeight: 30,
                                width: 60,
                                height: 30,
                                position: 'top',
                                distance: 1,
                                textStyle: {
                                    color: '#ffffff'
                                },
                                formatter: function (params) {
                                    return params.value + '个'
                                }
                            }
                        }
                    },
                    {
                        data: data,
                        type: 'line',
                        symbol: 'circle', //拐点样式
                        symbolSize: 6, //拐点大小
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    width: 2, //折线宽度
                                    color: '#FED8AC' //折线颜色
                                },
                                color: 'rgba(255,255,255,0)', //拐点颜色
                                borderColor: '#FED8AC', //拐点边框颜色
                                borderWidth: 2 //拐点边框大小
                            },
                            emphasis: {
                                color: '#ffffff' //hover拐点颜色定义
                            }
                        }
                    }
                ]
            }

            this.cpcBchat4.setOption(option)
        }
    }
}
</script>

<style lang='scss' scoped>
.cpcBot {
    display: flex;
    justify-content: space-between;
    .boxI {
        width: 448px;
        height: 206px;
        .biaoBg {
            width: 448px;
            height: 36px;
            background-image: url('../../../assets/cpc/biaoBg.png');
            background-position: center center;
            background-size: cover;
            color: #ffffff;
            font-size: 18px;
            padding: 10px 0 0 16px;
        }
    }
    .boxS {
        width: 320px;
        height: 206px;
        margin-top: 15px;
        .biaoBg {
            width: 232px;
            height: 36px;
            background-image: url('../../../assets/cpc/biaoBgs.png');
            background-position: center center;
            background-size: cover;
            color: #ffffff;
            font-size: 18px;
            padding: 10px 0 0 16px;
        }
        .boxARR {
            display: flex;
        }
    }
    .boxIimg {
        width: 381px;
        height: 157px;
        margin-top: 16px;
        margin-left: 7px;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .cpcBchatBox1 {
        width: 150px;
        height: 160px;
    }
    .cpcBchatBox2 {
        width: 150px;
        height: 160px;
    }
    .cpcBchatBox3 {
        width: 414px;
        height: 170px;
    }
    .cpcBchatBox4 {
        width: 414px;
        height: 170px;
    }
}
</style>